<template>
  <div class="other">
    <header>
      <webHader :title="pageName" :crumbs="`主页,${pageName}`" :backgroundImageUrl="headerBg" />
    </header>
    <section class="content" v-loading="loading">
      <div class="course-list">
        <div class="course-list-item" v-for="item in dataList">
          <div class="course-list-item-img">
            <img :src="item.imageUrl" alt="图片" />
            <span class="course-list-item-img-name">
              {{
                item.contentType == 0
                  ? "文档"
                  : item.contentType == 1
                    ? "表格"
                    : item.contentType == 2
                      ? "报名表单"
                      : item.contentType == 3
                        ? "外部链接"
                        : "--"
              }}
            </span>
          </div>
          <div class="course-list-item-title">
            {{ item.menuName }}
          </div>
          <div class="course-list-item-content">
            {{ item.remark }}
          </div>
          <div class="date">{{ formatDate(item.createTime) }}</div>
          <div class="learnMore" @click="goDetail(item)">了解更多</div>
        </div>
      </div>
      <template v-if="!dataList || dataList.length < 1">
        <Empty title="暂无数据~" />
      </template>
    </section>
    <Pagination :background="true" :total="total" :current-page.sync="pageNum" :page-size.sync="pageSize"
      @pagination-change="paginationChange" class="pagination" />
  </div>
</template>

<script setup>
import headerBg from "~/assets/web/activity-header-bg.png";
import { GetCustomizationList } from "~/apis/web";
import { formatDate } from "~/utils/utils";
import { ref, computed, watch } from "vue";

const total = ref(0);
const pageNum = ref(1);
const pageSize = ref(10);
const dataList = ref([]);
const loading = ref(false);
const route = useRoute();
const pageName = computed(() => {
  return route.query.pageName;
});
console.log("🚀 ~ pageName:", pageName)
const menuId = computed(() => route.query.id);
console.log("🚀 ~ menuId:", menuId)

// 监听 menuId 变化
watch(menuId, (newMenuId, oldMenuId) => {
  if (newMenuId !== oldMenuId && newMenuId) {
    // 重置分页到第一页
    pageNum.value = 1;
    init();
  }
}, { immediate: false });

const paginationChange = (val) => {
  pageNum.value = val.currentPage;
  pageSize.value = val.pageSize;

  init();
};

const goDetail = (item) => {
  const { $navigate } = useNuxtApp();
  $navigate(`/web/customCourse/detail?id=${item.id}`);
};

const init = async () => {
  try {
    nextTick(() => {
      window.scrollTo(0, 0);
    });
    dataList.value = [];
    loading.value = true;
    let params = {
      pageNo: pageNum.value,
      pageSize: pageSize.value,
      menuId: menuId.value,
    };
    const result = await GetCustomizationList(params);
    if (result && result.code == 0) {
      dataList.value = result.data?.list || [];
      total.value = Number(result.data?.total) || 0;
    }
  } catch (error) {
    dataList.value = [];
  } finally {
    loading.value = false;
  }
};

init();
</script>

<style lang="less" scoped>
.other {
  width: 100%;

  .pagination {
    width: 100%;
    padding: 0px 0 30px 50px;
    box-sizing: border-box;

    :deep(.el-pagination) {
      justify-content: flex-start;
    }

    :deep(.el-pager li:hover) {
      color: #1d1b1b !important;
    }

    :deep(.is-active) {
      background-color: #1d1b1b !important;
    }

    :deep(.el-pager .is-active:hover) {
      color: #ffffff !important;
    }
  }

  .content {
    width: 100%;
    margin: 0 auto;
    padding: 30px 106px 0 106px;
    box-sizing: border-box;
    min-height: 200px;

    .course-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, 292px);
      gap: 20px;
      width: 100%;
      justify-content: flex-start;
      margin-bottom: 70px;

      .course-list-item {
        background: #ffffff;
        border-radius: 0px 0px 0px 0px;
        cursor: pointer;
        padding-bottom: 20px;
        box-sizing: border-box;

        .course-list-item-img {
          width: 100%;
          aspect-ratio: 1 / 0.75;
          position: relative;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          .course-list-item-img-name {
            background: rgba(0, 0, 0, 0.5);
            border-radius: 0px 0px 0px 0px;
            font-family: PingFang HK, PingFang HK;
            font-weight: 400;
            font-size: 12px;
            color: #ffffff;
            letter-spacing: 1px;
            text-align: center;
            padding: 10px;
            box-sizing: border-box;
            position: absolute;
            bottom: 10px;
            right: 22px;
          }
        }

        .course-list-item-title {
          font-family: PingFang HK, PingFang HK;
          font-weight: 600;
          font-size: 16px;
          color: #1e2021;
          text-align: left;
          padding: 0 20px;
          margin: 16px 0;
          box-sizing: border-box;
          line-height: 26px;
        }

        .course-list-item-content {
          font-family: PingFang HK, PingFang HK;
          font-weight: 400;
          font-size: 14px;
          color: #000000;
          line-height: 20px;
          text-align: left;
          padding: 0 20px;
          margin-bottom: 16px;
          box-sizing: border-box;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .date {
          padding: 0 20px;
          box-sizing: border-box;
          font-family: PingFang HK, PingFang HK;
          font-weight: 400;
          font-size: 14px;
          color: #656c7e;
          margin-bottom: 16px;
        }

        .learnMore {
          width: 135px;
          border-radius: 0px 0px 0px 0px;
          border: 1px solid #1e2021;
          font-family: PingFang HK, PingFang HK;
          font-weight: 600;
          font-size: 14px;
          color: #1e2021;
          padding: 10px 0;
          text-align: center;
          box-sizing: border-box;
          cursor: pointer;
          margin: 0 auto;
        }
      }
    }
  }
}

::v-deep(.el-loading-mask) {
  background-color: transparent;
}
</style>
